<template>
  <el-timeline
    :class="{
      'is-timestamp': config.timePlacement === 'left' || typeof config.timePlacement === 'undefined'
    }"
  >
    <el-timeline-item v-for="(dataItem, index) in data" :key="index">
      <div class="main-box" v-bind="config.box || {}">
        <!-- 头部处理 begin-->
        <div v-if="config.head" class="main-head" v-bind="config.head || {}">
          <slot
            v-if="config.head && config.head.type === 'slot'"
            :name="config.head && config.head.name"
            v-bind="{ dataItem, index }"
          ></slot>
          <span v-else class="head-text">{{ dataItem[config.head.prop] }}</span>
          <span class="head-action">
            <template v-for="(button, key) in buttons">
              <!-- <i
                v-if="button.hidden ? button.hidden(dataItem) : true"
                :key="key"
                :class="'ls-icon-' + (button.type || button)"
                @click="
                  button.event
                    ? button.event(dataItem, button)
                    : $emit(button.type || button, dataItem, button)
                "
              ></i> -->
              <el-icon
                v-if="button.hidden ? button.hidden(dataItem) : true"
                :key="key"
                @click="buttonClick(button)"
              >
                <component :is="button.icon || button" :style="button.style"></component>
              </el-icon>
            </template>
          </span>
        </div>
        <!-- 头部处理 end-->
        <div class="main-content" v-bind="config.content || {}">
          <template v-if="Array.isArray(config.config)">
            <template v-for="(cf, i) in config.config">
              <!-- 时间处理 begin-->
              <div
                v-if="
                  cf.type === 'time' &&
                  (config.timePlacement === 'left' ||
                    typeof config.timePlacement === 'undefined') &&
                  dataItem[cf.prop]
                "
                class="timestamp"
                :key="i"
              >
                <div v-for="date in dataItem[cf.prop].split(' ')" :key="date">
                  {{ date }}
                </div>
              </div>
              <!-- 时间处理 end-->
              <!-- 通用项处理 begin-->
              <template v-else-if="cf.type === 'slot'">
                <slot :name="cf.prop" v-bind="dataItem"></slot>
              </template>
              <div v-else class="main-content-item" :class="cf.class" :key="i + 0">
                <span class="-label" v-if="cf.label">{{ cf.label }}:</span>
                <span class="-value">{{ dataItem[cf.prop] }}</span>
              </div>
              <!-- 通用项处理 end-->
            </template>
          </template>
          <template v-else>
            <div>{{ dataItem[config.config] }}</div>
          </template>
        </div>
      </div>
    </el-timeline-item>
  </el-timeline>
</template>
<script setup>
import { watch, ref } from 'vue'
const props = defineProps({
  dataConfig: {
    type: Object,
    default: () => ({})
  },
  buttons: {
    type: Array,
    default: () => []
  },
  data: {
    type: Array,
    default: () => []
  }
})
const config = ref({})
const emits = defineEmits(['buttonClick'])
const buttonClick = (button) => {
  emits('buttonClick', button.eventName || button)
}
const initObjKey = (obj, keyArr) => {
  keyArr.forEach((element) => {
    if (!obj[element]) {
      obj[element] = {}
    }
  })
}
watch(
  () => props.dataConfig,
  (newVal) => {
    config.value = JSON.parse(JSON.stringify(props.dataConfig))
    if (newVal.style === 'noframe') {
      initObjKey(config.value, ['box', 'head', 'content'])
      config.value.box.style = {
        border: 0,
        borderRadius: 0
      }
      config.value.head.style = {
        background: 'transparent',
        border: 0,
        height: '20px',
        paddingLeft: 0
      }
      config.value.content.style = {
        paddingLeft: 0
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
)
</script>
<style scoped></style>
